<template>
    <div class="mui-content banpenStep1 mui-scroll-wrapper mgb2">
        <div class="mui-scroll">
            <!--服务信息-->
            <div class="slwy-panel mgt1">
                <div class="panel-content">
                    <div class="panel-title">
                        <span>车辆信息</span>
                    </div>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell" v-link="{name:'orderCar'}">
                            <p class="mui-navigate-right" v-if="carPlateNumber!=''||carPlateNumber!=null">
                                <span class="color2 text2-size color2">{{carPlateNumber}}</span>
                                <span class="mui-pull-right text2-size color2 mgr1">{{carBrand}}{{carModel}}</span>
                            </p>
                            <p class="mui-navigate-right text2-size color3" v-if="carPlateNumber==''||carPlateNumber==null">添加车辆信息</p>
                        </li>
                    </ul>
                </div>
            </div>
            <!--维修车面-->
            <div class="slwy-panel" id="panel-wxcm">
                <div class="panel-content">
                    <div class="panel-title">
                        <span class="text2-size color1">维修车面</span>
                        <a class="mui-pull-right mui-text-middle" href="http://mp.weixin.qq.com/s/m6I3-gd_axnpbdg06RRfZA">
                            <span class="text2-size color3 mui-text-middle">服务流程</span>
                            <i class="text1-size color3 mui-icon mui-icon-help mui-text-middle"></i>
                        </a>
                    </div>
                    <div class="position-image box">
                        <img  src="../../images/banpen/car_gray.jpg" style="width: 79.7%" />
                        <div class="carImg">
                            <img :src="part.url" class="{{part.active==true?'p_gray':''}} carparts"  @click="partClickEvent($index,part.name)" v-for="part in parts">
                        </div>
                    </div>
                </div>
            </div>
            <!--选择项目-->
            <div class="slwy-panel">
                <div class="panel-content">
                    <div class="panel-title">已选择</div>
                    <ul class="mui-table-view" id="projectItems">
                        <li class="mui-table-view-cell" v-for="item in serviceCart" v-show="serviceCart.length != 0">
                         <span class="color2">
                             <span class="color1 text2-size">{{ item.locName }}<span class="color1 text2-size">：</span></span>
                                <span class="color2 text2-size">{{ item.spec }}</span>
                            </span>
                            <span class="mui-pull-right color1 text2-size">{{ item.amount | currency '￥' 2 }}</span>
                        </li>
                    </ul>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell text3">
                            <p class="Tips">以上价格为平台参考价，最终价格以服务中心为准。</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--选择项目底部弹窗-->
    <div id="prodSpec" class="mui-popover mui-popover-action mui-popover-bottom">
        <ul class="mui-table-view mui-text-left">
            <li class="mui-table-view-cell specDetailInfo">
                <span class="text2-size color2">已选择：</span>
                <span class="text2-size color1" v-if="penqiSelectItem.length != 0">{{partName}}</span>
                <p class="mui-icon mui-icon-close color2" @click="closePop()"></p>
            </li>
            <li class="mui-table-view-cell natureCotainer">
                <p class="text2-size color1">服务项目</p>
                <div v-if="penqiSelectItem.length != 0">
                    <span class="text2-size color2">喷漆：</span>
                    <span class="text2-size color2 mui-btn mui-btn-outlined penqi" id="{{penqi.goodsCode}}" v-for="penqi in penqiSelectItem" @click="selectServiceItem(penqi,'penqi')">{{penqi.bpItem}}</span>
                </div>
                <div v-if="banpenSelectItem.length != 0">
                    <span class="text2-size color2">钣金：</span>
                    <span class="text2-size color2 mui-btn mui-btn-outlined banjin"  id="{{banpen.goodsCode}}" v-for="banpen in banpenSelectItem" @click="selectServiceItem(banpen,'banjin')">{{banpen.bpItem}}</span>
                </div>
            </li>
            <div class="operateBtn">
                <button class="mui-btn mui-btn-primary" @click="specConfirm()">确认</button>
            </div>
        </ul>
    </div>
    <!--订单操作-->
    <div class="itemOperate">
        <div class="col-8 quotedPice">
            <span class="col-6 text2-size color2">预估报价:</span>
            <span class="col-6 mui-text-right price">{{ price | currency '￥' 2 }}</span>
        </div>
        <div class="col-4">
            <button class="mui-btn mui-btn-primary itemOperateBtn text1-size" @click="toBanpen()">下一步</button>
        </div>
    </div>
</template>
<style>
    .banpenStep1 .box{margin: 20px auto; text-align: center; position: relative; width: 100%;}
    .banpenStep1 .box .part{position: absolute;}
    .p_gray{filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%);  -o-filter: grayscale(100%);  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  -webkit-filter: grayscale(1);}
    .p_spied{filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(100%); -ms-filter: grayscale(0);  -o-filter: grayscale(0);  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0);  -webkit-filter: grayscale(0);}
    .banpenStep1 .carImg img{position: absolute;}
    .banpenStep1 .carImg img:nth-child(1){top: -2.6px; left: 13.8%; z-index: 101; width: 72.6%;}
    .banpenStep1 .carImg img:nth-child(2){top: 5.4%; left: 31.5%; z-index: 101; width: 37%;}
    .banpenStep1 .carImg img:nth-child(3){top: 8%; left: 17%; z-index: 102; width: 12.5%; }
    .banpenStep1 .carImg img:nth-child(4){top: 8%; right: 17%; z-index: 104; width: 12.3%;}
    .banpenStep1 .carImg img:nth-child(5){top: 31.4%; left: 9.2%; z-index: 105; width: 8.5%;}
    .banpenStep1 .carImg img:nth-child(6){top: 31.4%; right: 9.2%; z-index: 106; width:8.5%;}
    .banpenStep1 .carImg img:nth-child(7){top: 32.6%; left: 28.9%; z-index: 107; width:8%;}
    .banpenStep1 .carImg img:nth-child(8){top: 32.6%; right: 28.9%; z-index: 108; width:7.9%;}
    .banpenStep1 .carImg img:nth-child(9){top: 33%; left: 16%; z-index: 109;  width:13.5%;}
    .banpenStep1 .carImg img:nth-child(10) {top: 33%; right: 16%;  z-index: 110; width: 13.5%;}
    .banpenStep1 .carImg img:nth-child(11) {top: 42.2%; left: 38.7%; z-index: 111; width: 22.5%;}
    .banpenStep1 .carImg img:nth-child(12) {top: 52.4%; left: 16.3%; z-index: 118; width: 14%;}
    .banpenStep1 .carImg img:nth-child(13) {top: 52.4%; right: 16.3%; z-index: 119; width: 13.9%;}
    .banpenStep1 .carImg img:nth-child(14) {top: 82%; left: 37.3%; z-index: 114; width: 25.3%;}
    .banpenStep1 .carImg img:nth-child(15) {top: 64.8%; left: 17.2%; z-index: 115; width: 14.3%;}
    .banpenStep1 .carImg img:nth-child(16){top: 65%; right: 17%; z-index: 116; width: 14.4%;}
    .banpenStep1 .carImg img:nth-child(17) {top: 76.6%; left: 15.8%; z-index: 112; width: 68.5%;}
    /*弹框*/
    #prodSpec{ width:100%; border-radius:0; bottom: 0; left: 0; z-index: 1200; border-radius: 0;}
    #prodSpec>ul{ margin: 0; border-radius: 0; max-height: 6rem;}
    #prodSpec .specDetailInfo{position: relative;}
    #prodSpec .specDetailInfo .mui-icon-close{position: absolute; right: 0.3rem; top:0.15rem; font-size: 0.5rem;}
    #prodSpec .natureCotainer, .banpenStep1 #prodSpec .natureCotainer p,.banpenStep1 #prodSpec .natureCotainer span{ vertical-align: middle;}
    #prodSpec .natureCotainer>div{margin: 0.2rem 0;}
    #prodSpec .natureCotainer .mui-btn{padding: 0; width: 1.5rem; height: 0.7rem; line-height: 0.7rem; margin-right: 0.2rem;}
    #prodSpec .active{border:1px solid #ff8317 !important; color: #ff8317 !important;}
    /*维修项目操作*/
    .itemOperate{position: fixed;  bottom: 0; left: 0; right: 0; height: 1.1rem;  background: #fff; margin-top: 1rem;  z-index: 1000;}
    .itemOperate>div{height: 100%;}
    .quotedPice{padding: 0 0.3rem;}
    .quotedPice>span{line-height: 1.1rem;}
    .itemOperateBtn{width: 100%; height: 100%; border-radius: 0 !important; padding: 0 !important;}

</style>
<script type="text/ecmascript-6">
		import '../../fonts/mui.css';
        import Page from '../../base/Page'
        import { API } from '../../config/constants'
        export default new Page({
            vuex:{
        			actions:{
        				initOrderCar:function({dispatch}){
        					dispatch('INIT_ORDER_CAR');
        				},
        				updOrderCar:function({dispatch},data){
                            dispatch('UPD_ORDER_CAR',data);
                        },
                        updOrderDetails:function({dispatch},data){
                            dispatch('UPD_ORDER_DETAILS',data);
                        }
        			},
        			getters:{
        				carPlateNumber:function(state){
                            return state.order.car.carPlateNumber;
                        },
                        carBrand:function(state){
                            return state.order.car.carBrand;
                        },
                        carModel:function(state){
                            return state.order.car.carModel;
                        },
                        carBuyPrice:function(state){
                            return state.order.car.carBuyPrice;
                        },
                        carBuyDate:function(state){
                            return state.order.car.carBuyDate;
                        },
                        brandImg:function(state){
                            return state.order.car.brandImg;
                        }
        			}
        		},
            data(){
                return{
                    parts:[
                        {num:'1',name:'前保险杠',active:true,url:require('../../images/banpen/1.png')},
                        {num:'2',name:'发动机舱盖',active:true,url:require('../../images/banpen/2.png')},
                        {num:'3',name:'左前翼子板',active:true,url:require('../../images/banpen/3.png')},
                        {num:'4',name:'右前翼子板',active:true,url:require('../../images/banpen/4.png')},
                        {num:'5',name:'左底大边',active:true,url:require('../../images/banpen/5.png')},
                        {num:'6',name:'右底大边',active:true,url:require('../../images/banpen/6.png')},
                        {num:'7',name:'左反光镜',active:true,url:require('../../images/banpen/7.png')},
                        {num:'8',name:'右反光镜',active:true,url:require('../../images/banpen/8.png')},
                        {num:'9',name:'左前门',active:true,url:require('../../images/banpen/9.png')},
                        {num:'10',name:'右前门',active:true,url:require('../../images/banpen/10.png')},
                        {num:'11',name:'车顶',active:true,url:require('../../images/banpen/11.png')},
                        {num:'12',name:'左后门',active:true,url:require('../../images/banpen/12.png')},
                        {num:'13',name:'右后门',active:true,url:require('../../images/banpen/13.png')},
                        {num:'14',name:'行李箱盖',active:true,url:require('../../images/banpen/14.png')},
                        {num:'15',name:'左后翼子板',active:true,url:require('../../images/banpen/15.png')},
                        {num:'16',name:'右后翼子板',active:true,url:require('../../images/banpen/16.png')},
                        {num:'17',name:'后保险杠',active:true,url:require('../../images/banpen/17.png')},
                    ],
                    serviceList:null,//服务项目列表
                    serviceCart:[],//服务项目购物车
                    banpenSelectItem:[],//钣喷选择项目
                    penqiSelectItem:[],//喷漆选择项目
                    partName:'',//弹框展示用
                    partServiceItems:{},//选中的服务项目，加入购物车用
                    touchedPartIndex:0,//选择的部件位置号
                }
            },
            ready () {
                //初始化订单的车辆信息
                this.initOrderCar();

                //上拉下拉（不刷新数据）
                mui('.mui-scroll-wrapper').scroll({
                    indicators: true, //是否显示滚动条
                    deceleration : 0.0005,
                });

                //为选择订单车辆的时候处理
                if(this.carBuyPrice === undefined) {
                    this.getJSON(API.GET_DICT_LIST, {key:'CAR_PRICE_RANGE'}, res => {
                    });
                    return;
                }

                //按照车价类型的选择，获取服务类目及价格
                this.getJSON(API.GET_GOODSLIST, {carPrice:this.carBuyPrice}, res => {
                    this.serviceList = res.resultData;
                });

                let that = this;

            },
            methods: {
                //点击部件触发事件
                partClickEvent: function (index, partName) {
                    //先清除中间变量
                    this.clearSelectedItem();

                    //未选择车辆的情况
                    if (this.serviceList === null) {
                        mui.toast('请先选择您的车辆', {duration: 'short', type: 'div'});
                        return;
                    }

                    this.parts[index].active = !this.parts[index].active;

                    //选择部件删除服务项目
                    if (this.parts[index].active == true) {
                        //remove order detail
                        this.removeCartItem(index);
                        this.partName = '';
                    } else {
                        //选择部件追加服务项目
                        this.partName = partName;
                        this.initPartServiceItem(index, partName);
                        mui('#prodSpec').popover('toggle');
                    }

                    this.touchedPartIndex = index + 1;
                },
                //删除服务项目
                removeCartItem: function (index) {
                    for (var item in this.serviceCart) {

                        if (this.serviceCart[item].id == index + 1) {
                            this.serviceCart.splice(item, 1);
                            break;
                        }
                    }

                    //console.log(JSON.stringify(this.serviceCart));

                },
                //初始化部件服务项目
                initPartServiceItem: function (index, partName) {
                    var itemIndex = index + 1;

                    var serviceItems = this.serviceList[itemIndex.toString() + '-' + partName];

                    //初始化服务选择项目
                    this.banpenSelectItem = serviceItems['钣金'];
                    this.penqiSelectItem = serviceItems['喷漆'];
                },

                closePop: function () {
                    //remove blank part active;
                    this.parts[this.touchedPartIndex - 1].active = true;

                    this.clearSelectedItem();
                    mui('#prodSpec').popover('hide');
                },

                //钣喷、喷漆服务选择
                selectServiceItem: function (item, type) {
                    let that = this;
                    mui("." + type).each(function (i, typeItem) {
                        if (typeItem.classList.contains('active')) {
                            delete that.partServiceItems[typeItem.id];
                            typeItem.classList.remove('active');
                        } else {
                            if (typeItem.id === item.goodsCode) {
                                typeItem.classList.add('active');
                                that.partServiceItems[item.goodsCode] = item;
                            }
                        }
                    });
                },
                //确认选择服务，加入购入车
                specConfirm: function () {
                    var spec = '';
                    var amount = 0;

                    //计算spec,amount
                    for (var key in this.partServiceItems) {
                        amount = amount + this.partServiceItems[key].goodsPrice;
                        spec = spec + ',' + this.partServiceItems[key].bpItem;
                    }

                    if (amount === 0) {
                        mui.toast('请选择服务项目或者关闭',{ duration:'short', type:'div' });
                        return;
                    }

                    //spec处理
                    spec = spec.substring(1, spec.length);

                    //组织cartItem对象
                    var cartItem = {
                        'spec': spec,
                        'amount': amount,
                        'id': this.touchedPartIndex,
                        'locName': this.partName,
                        'items': this.partServiceItems
                    };

                    //加入购物车
                    this.serviceCart.push(cartItem);
                    //console.log(JSON.stringify(this.serviceCart));

                    mui('#prodSpec').popover('toggle');

                    this.clearSelectedItem();
                },
                //清除临时选择服务项目
                clearSelectedItem: function () {
                    //remove active class
                    for (var partServiceItem in this.partServiceItems) {
                        mui('#' + partServiceItem)[0].classList.remove('active');
                    }

                    //clear temp select information
                    this.partServiceItems = {};
                    this.touchedPartIndex = 0;
                },
                toBanpen: function () {

                    if (this.serviceCart.length == 0) {
                        mui.toast('请先选择服务项目', {duration: 'short', type: 'div'});
                        return;
                    }

                    this.updOrderDetails(this.serviceCart);
                    this.$route.router.go('/banpen/step2/');
                },

            },
            computed: {
                price: function () {
                    var total = 0;
                    for ( var i=0;i<this.serviceCart.length;i++) {
                        total = total + this.serviceCart[i].amount;
                    }
                    return total;
                },

            },
        })
</script>

